<template>
  <div class="settings-page">
    <el-card>
      <template #header>
        <span>系统配置</span>
      </template>

      <!-- 系统设置 -->
      <el-form
        :model="contactViewForm"
        label-width="200px"
        v-loading="loading"
      >
        <el-divider content-position="left">
          <el-icon><Setting /></el-icon>
          联系方式查看配置
        </el-divider>

        <el-form-item label="启用额度消耗">
          <el-switch
            v-model="contactViewForm.enable_contact_view_fee"
            active-text="启用"
            inactive-text="禁用"
            :disabled="loading"
          />
          <div class="form-tip">
            启用后,用户查看联系方式需要消耗额度;关闭后,所有用户均可免费查看联系方式
          </div>
        </el-form-item>

        <!-- 启用额度消耗时显示的配置 -->
        <template v-if="contactViewForm.enable_contact_view_fee">
          <el-form-item label="每月免费查看次数">
            <el-input-number
              v-model="contactViewForm.free_views_per_month"
              :min="0"
              :max="100"
              :disabled="loading"
            />
            <div class="form-tip">
              每个用户每月可免费查看的次数(启用额度消耗后生效)
            </div>
          </el-form-item>

          <el-form-item label="超额查看费用(元)">
            <el-input-number
              v-model="contactViewForm.price_per_view"
              :min="0"
              :max="100"
              :precision="2"
              :step="0.1"
              :disabled="loading"
            />
            <div class="form-tip">
              超出免费次数后,每次查看需要支付的费用(启用额度消耗后生效)
            </div>
          </el-form-item>
        </template>

        <el-divider content-position="left">
          <el-icon><Setting /></el-icon>
          聊天消息配置
        </el-divider>

        <el-form-item label="聊天模式">
          <el-radio-group
            v-model="contactViewForm.chat_message_mode"
            :disabled="loading"
          >
            <el-radio-button label="free">免费模式</el-radio-button>
            <el-radio-button label="paid">付费模式</el-radio-button>
          </el-radio-group>
          <div class="form-tip">
            免费模式: 用户每日有固定免费条数,不消耗套餐额度; 付费模式: 每条消息都需要消耗套餐额度
          </div>
        </el-form-item>

        <template v-if="isFreeChatMode">
          <el-form-item label="每日免费消息条数">
            <el-input-number
              v-model="contactViewForm.chat_free_daily_limit"
              :min="0"
              :max="100"
              :step="1"
              :disabled="loading"
            />
            <div class="form-tip">
              限制每位用户每日最多可免费发送的消息数量
            </div>
          </el-form-item>
        </template>

        <el-form-item>
          <el-button
            type="primary"
            @click="handleSave"
            :loading="saving"
          >
            保存配置
          </el-button>
          <el-button @click="handleReset" :disabled="loading || saving">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Setting } from '@element-plus/icons-vue'
import { settingsApi } from '@/api/settings'

type ChatMessageMode = 'free' | 'paid'

interface ContactViewForm {
  enable_contact_view_fee: boolean
  free_views_per_month: number
  price_per_view: number
  chat_message_mode: ChatMessageMode
  chat_free_daily_limit: number
}

const loading = ref(false)
const saving = ref(false)
const contactViewForm = ref<ContactViewForm>({
  enable_contact_view_fee: true,
  free_views_per_month: 3,
  price_per_view: 1.0,
  chat_message_mode: 'paid',
  chat_free_daily_limit: 3
})

// 保存初始值用于重置
const initialForm = ref<ContactViewForm>({
  enable_contact_view_fee: true,
  free_views_per_month: 3,
  price_per_view: 1.0,
  chat_message_mode: 'paid',
  chat_free_daily_limit: 3
})

const isFreeChatMode = computed(() => contactViewForm.value.chat_message_mode === 'free')

// 加载配置
const loadConfig = async () => {
  loading.value = true
  try {
    const response = await settingsApi.getContactViewConfig()
    const freeViews = parseInt(response.data.free_views_per_month, 10)
    const pricePerView = parseFloat(response.data.price_per_view)
    const chatLimit = parseInt(response.data.chat_free_daily_limit ?? '0', 10)
    contactViewForm.value = {
      enable_contact_view_fee: response.data.enable_contact_view_fee === '1',
      free_views_per_month: Number.isNaN(freeViews) ? 0 : freeViews,
      price_per_view: Number.isNaN(pricePerView) ? 0 : pricePerView,
      chat_message_mode: response.data.chat_message_mode === 'free' ? 'free' : 'paid',
      chat_free_daily_limit: Number.isNaN(chatLimit) ? 0 : chatLimit
    }
    initialForm.value = { ...contactViewForm.value }
  } catch (error) {
    console.error('加载配置失败:', error)
    ElMessage.error('加载配置失败')
  } finally {
    loading.value = false
  }
}

// 保存配置
const handleSave = async () => {
  saving.value = true
  try {
    await settingsApi.updateContactViewConfig(contactViewForm.value)
    ElMessage.success('保存配置成功')
    initialForm.value = { ...contactViewForm.value }
  } catch (error) {
    console.error('保存配置失败:', error)
    ElMessage.error('保存配置失败')
  } finally {
    saving.value = false
  }
}

// 重置表单
const handleReset = () => {
  contactViewForm.value = { ...initialForm.value }
}

onMounted(() => {
  loadConfig()
})
</script>

<style scoped>
.settings-page {
  padding: 20px;
}

.form-tip {
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.5;
}

:deep(.el-divider__text) {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>
